<template>
  <div class="cinema-distance">
    <p>距离最近</p>
    <div class="cinemaTags">
      <span v-for="item in beforeFive" :key="item.cinemaId" @click="skipCinemaDetail(item)">{{ item.name }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CinemaDistance',
  props: {
    cinemasRe: {
      type: Array,
      default: []
    }
  },
  computed: {
    beforeFive() {
      return this.cinemasRe.splice(0, 5)
    }
  },
  methods: {
    skipCinemaDetail({ cinemaId }) {
      this.$router.push(`/cinema/${cinemaId}/film`)
    }
  }
}
</script>

<style lang="scss" scoped>
.cinema-distance {
  padding: 0 0.15rem 0.08rem 0;
  margin-left: 0.15rem;
  border-bottom: 0.5px solid #eee;

  p {
    margin: 0.15rem 0;
    color: #c9c0ce;
  }
  .cinemaTags {
    display: flex;
    flex-wrap: wrap;
    span {
      padding: 0.08rem 0.12rem;
      background-color: hsla(0, 0%, 95.7%, 0.6);
      margin: 0 0.08rem 0.08rem 0;
    }
  }
}
</style>